<script setup lang="ts">
import Logo from '~/components/Logo.vue'
import { storageUser } from '~/logic/storage'
import { ref } from "vue";
let text = ref("")
function openOptionsPage() {
  chrome.runtime.openOptionsPage()
}
function inputHandler(e:any) {
  console.log(e)

  chrome.tabs.query({ active: true, currentWindow: true }, (tabs: any) => {
        text.value = text.value
    chrome.tabs.sendMessage(tabs[0].id, { action: 'highlight', keyword:text.value });
  });
}
</script>

<template>
  <div class="flex flex-col items-center">
   <input type="text" class="mt-4" v-model="text" @input="inputHandler">
    <Logo class="mt-4" />
    {{ text }}
    <button class="mt-4 p-2 text-xs text-white bg-blue-300 rounded" @click="openOptionsPage">
      Open Options Page
    </button>
    <div class="mt-2">
      <span class="opacity-50">Storage:</span> {{ storageUser }}
    </div>
  </div>
</template>

<style>
#app {
  @apply w-64 h-80;
}
input {
  background-color: rgba(33, 33, 33, .5);
  height: 30px;

}
</style>
